<template>
	<view class="pageItem">
		<view class="main">
			<view class="class" @click="goGoods" :data-cid="f_id">
				<image class="logo" src="../../static/all.png"></image>
				<view class="txt">全部商品</view>
			</view>
			<view class="class" v-for="(item,index) in classArr" :key="'c_'+index"  @click="goGoods" :data-cid="item.cid"> 
				<image class="logo" :src="item.image"></image>
				<view class="txt">{{ item.name }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				f_id:'',   //上级id,也就是全部时传的id
				classArr:[],
			};
		},
		onLoad(e) {
			if(e.cid){
				this.f_id = e.cid;
				this.getClass();
			}
		},
		methods:{
			getClass(){
				let that = this;
				this.Net._get('category_one',{cid:this.f_id},(res)=>{
					that.classArr = res.data;
				});
			},
			goGoods(e){
				uni.navigateTo({
					url: '/pages/list/list?cid='+e.currentTarget.dataset.cid
				});
			}
		}
	}
</script>

<style lang="scss">
.main{
	width: 100%;
	padding: 0 4% 3vw;
	display: flex;
	flex-wrap: wrap;
	.class:not(:nth-child(4n+1)){
		margin-left: 4%;
	}
	.class{
		width: 22%;
		background: #ffffff;
		border-radius: 15rpx;
		text-align: center;
		padding: 20rpx 0;
		margin-top: 20rpx;
		.logo{
			width: 15vw;
			height: 15vw;
		}
		.txt{
			font-size: 28rpx;
			padding-top: 10rpx;
			color: #333333;
		}
	}
}
</style>
